@import "variable";
.cell-list {
    @size: 45px;
    margin: @space 0;
    &.has-border {
        border-top: 1px solid @borderColor;
        border-bottom: 1px solid @borderColor;
    }
    &.label-text {
        .cell {
            .label {
                width: auto;
                .f1();
            }
            .text {
                .f1();
                padding: 0;
                justify-content: flex-end;
            }
        }
    }
    &.card-list {
        margin: 0;
        .card {
            margin: @space;
            padding: @space;
            .border();
            border-radius: @space / 2;
            background-color: #fff;
            box-shadow: @space / 3 @space / 3 @space / 2 @borderColor;
            p {
                display: flex;
                align-items: flex-start;
                .label {
                    width: @size;
                    max-width: @size;
                    .flexLeft();
                }
                .text {
                    margin-left: @space;
                    .f1();
                }
            }
        }
        &.card-list-grid {
            .card {
                padding: 0;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                .image {
                    width: 100%;
                    height: @size * 3;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .info {
                    margin: @space;
                    margin-bottom: 0;
                    color: @grayFont;
                }
                .content {
                    flex: 1;
                    max-height: 3em;
                    margin: @space;
                    .e();
                }
                .ctrls {
                    padding: @space / 2 @space;
                    border-top: 1px solid @borderColor;
                    .flexBetween();
                    .btn-full {
                        width: 100%;
                        margin: 0;
                    }
                }
            }
            &.grid2 {
                padding: 0 @space;
                margin: 0;
                display: flex;
                flex-wrap: wrap;
                .card {
                    margin: @space / 2 0;
                    width: 49%;
                    &:nth-child(2n) {
                        margin-left: 2%;
                    }
                    .image {
                        height: @size * 2.5;
                    }
                    .info {
                        margin: @space * 2 / 3;
                        margin-bottom: 0;
                    }
                    .content {
                        margin: @space * 2 / 3;
                    }
                }
            }
            &.grid3 {
                padding: 0 @space;
                margin: 0;
                display: flex;
                flex-wrap: wrap;
                .card {
                    margin: @space / 2 0;
                    width: 32%;
                    margin-right: 2%;
                    .info {
                        margin: @space / 2;
                        margin-bottom: 0;
                    }
                    .content {
                        margin: @space / 2;
                    }
                    .ctrls {
                        padding: @space / 3 @space / 2;
                    }
                    &:nth-child(3n) {
                        margin-right: 0;
                    }
                    .image {
                        height: @size * 2;
                    }
                }
            }
        }
    }
    &.field-list {
        .field {
            height: @size;
            border-bottom: 1px solid @borderColor;
            .big;
            display: flex;
            justify-content: space-between;
            padding: 0 @space;
            align-items: center;
            cursor: pointer;
            background-color: #fff;
            &.bg-warning {
                    background-color: @form-warning;
                }
            &:last-child {
                border-bottom: none;
            }
            &.textarea {
                height: auto;
                min-height: @size;
                padding: @space;
                align-items: flex-start;
                .content {
                    flex: 1;
                    height: @size * 1.5;
                    padding: @space / 2;
                    line-height: inherit;
                    font-size: inherit;
                    border:none;
                    background-color: initial;
                }
            }
            .label {
                width: @size;
                height: 100%;
                .flexLeft();
                &.auto {
                    width: auto;
                }
                .icon {
                    margin-right: @space / 2;
                }
            }
            .input {
                .f1();
                padding: @space;
                height: 100%;
                border: none;
                font-size: inherit;
                .flexLeft();
                background-color: initial;
            }
            .right {
                height: 100%;
                .flexRight();
                .icon {
                    margin-left: @space / 2;
                }
            }
        }
    }
    &.space-list {
        .cell,
        .field {
            border: none;
            position: relative;
            &.full-border {
                &:after {
                    width: 100%;
                }
            }
            &:after {
                content: "";
                bottom: 0;
                right: 0;
                width: e('calc(100% - 40px)');
                height: 1px;
                background-color: @borderColor;
                position: absolute;
            }
            &:last-child {
                &:after {
                    display: none;
                }
            }
            .label {
                .iconfont {
                    font-size: 1.7em;
                    margin: 0 @space;
                    margin-top: @space / 2;
                    vertical-align: middle;
                }
            }
        }
        &.cell-image-text {
            .cell {
                &:after {
                width: e('calc(100% - 1.3rem)');
                }
            }
        }
    }
    &.cell-image-text {
        .cell {
            height: auto;
            padding: @space;
            align-items: flex-start;
            -webkit-tap-highlight-color: transparent;
            .image {
                width: @size;
                height: @size;
                img {
                    width: 100%;
                    height: 100%;
                }
                &.radius {
                    .border();
                }
            }
            .text {
                padding: 0;
                margin-left: @space;
                flex-direction: column;
                align-items: flex-start;
                .header {
                    font-weight: lighter;
                }
                .content {
                    .normal;
                }
            }
        }
    }
    .cell {
        max-width: 100%;
        min-height: @size;
        border-bottom: 1px solid @borderColor;
        font-size: 13px;
        display: flex;
        justify-content: space-between;
        padding: 0 @space * 1.5;
        align-items: center;
        background-color: @white;
        overflow: hidden;
        &:last-child {
            border-bottom: none;
        }
        .label {
            width: auto;
            height: 100%;
            .flexLeft();
        }
        .text {
            .f1();
            min-width: 5em;
            // max-width: e('calc(100% - 1.5rem)');
            padding: @space;
            height: 100%;
            .flexLeft();
        }
        .right {
            height: 100%;
            .flexRight();
        }
        .icon {
            margin-right: @space / 2;
        }
    }
}